<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)
//定义数据模型 响应式对象要.value js对象
const registerData = ref({
    idCard:'',
    password:'',
    rePassword:'',
    name:'',
    sex:'',
    age:'',
    phone:'',
    address:'',
    student:''

})

//校验密码的函数 规则 值 回调函数
const checkRePassword = (rule,value,callback)=>{
    if(value===''){
        callback(new Error('请确认密码'))
    }else if(value !== registerData.value.password){
        callback(new Error('确认密码错误'))
    }else{
        callback()//通过
    }
}

const checkidCard = (rule,value,callback)=>{
    const reg = /^[1-9]\d{16}[\dXx]$/;
    if(value===''){
        callback(new Error('请输入身份证号'))
    }else if(value.length!==18){
        callback(new Error('长度为18位'))
    }else if(!reg.test(value)){
        callback(new Error('身份证号格式错误'))
    }
    else{
        callback()
    }
}
//定义表单校验规则 定义之后与表单绑定在一起 checkRePassword是自定义函数  trigger:'blur'失焦时校验
const rules={
    idCard:[
        {required:true,validator:checkidCard,trigger:'blur'}
    ],
    password:[
        {required:true,message:'请输入密码',trigger:'blur'},
        {min:5,max:16,message:'长度为5-16位',trigger:'blur'}
    ],
    rePassword:[
        {validator:checkRePassword,trigger:'blur'}
    ] 
}

//注册按钮的单击事件
//调用后台接口完成注册 需要调用user.js提供的函数 
//调用时需加await来同步等待异步调用的结果 await async
//输入时封装到registerData中因为v-model 不能直接传参registerData
import {userRegisterService,userLoginService} from '@/api/user.js'
const  register = async()=>{
    //不能直接传参registerData因为是响应式对象 调用user.js的接口
    //直接传给后端即可匹配数据库的 sex 字段
   let result = await userRegisterService(registerData.value)
    // if(result.code===0){
    //     //成功了
    //     alert(result.msg?result.msg:注册成功);
    // }else{
    //     //失败了
    //     alert('注册失败');
    // }

    //alert(result.msg?result.msg:注册成功);
    ElMessage.success(result.msg?result.msg:'注册成功')//好看
}

//绑定数据，复用注册表单的数据模型
//表单数据校验也复用
//登录函数
import { useTokenStore } from '@/stores/token.js';
import {useRouter} from 'vue-router'
//userouter是一个函数 调用这个函数得到路由器 得到的路由器就是vue应用实例使用的路由器 也就是导出的路由器（写的）
const tokenStore = useTokenStore();
const router = useRouter()
const login = async()=>{
    //调用接口，完成登录 得到响应的token 把token存入pinia中
    // 只提取登录需要的两个字段，彻底排除student

    //因为再次登录时 没有student但把student传给了后端一个null会错误
  const loginData = {
    idCard: registerData.value.idCard,
    password: registerData.value.password
  };
  let result = await userLoginService(loginData);
    // if(result===0){
    //     alert(result.msg?result.msg:登录成功);
    // }else{
    //     alert('登录失败');
    // }
    // alert(result.msg?result.msg:登录成功);
    ElMessage.success(result.msg?result.msg:'登录成功')//好看
    tokenStore.setToken(result.data)
    //跳转到首页 路由知道哪个路径对应首页组件
    //把路径push为/
    router.push('/')
}

//定义函数清空数据模型 因为注册登录绑了一个数据模型 切换页面时数据会保留
const clearRegisterData = ()=>{
    registerData.value={
        idCard:'',
        password:'',
        rePassword:''
    }
}



</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单  数据绑定给表单:model="registerData" -->
             <!--给每一个表单项绑定对应的属性值v-model-->
             <!--绑定规则-->
             <!--给每个表单项指定对应的校验规则 prop=""-->
            <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item prop="idCard">
                    <el-input :prefix-icon="User" placeholder="请输入身份证号" v-model="registerData.idCard"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
                </el-form-item>
                <!-- 姓名 -->
                 <el-form-item>
                    <el-input :prefix-icon="Lock" placeholder="请输入姓名" v-model="registerData.name"></el-input>
                 </el-form-item>
                <!-- 性别 -->
                <el-form-item >
                    <el-select v-model="registerData.sex" placeholder="选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 是否为学生 -->
                <el-form-item >
                    <el-select v-model="registerData.student" placeholder="是否为学生">
                        <el-option label="是" :value="true"></el-option>
                        <el-option label="否" :value="false"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 年龄 -->
                <el-form-item>
                    <el-input :prefix-icon="Lock" placeholder="请输入年龄" v-model="registerData.age"></el-input>
                </el-form-item>
                <!-- 手机号 -->
                 <el-form-item>
                    <el-input :prefix-icon="Lock" placeholder="请输入手机号" v-model="registerData.phone"></el-input>
                 </el-form-item>
                <!-- 地址 -->
                 <el-form-item>
                    <el-input :prefix-icon="Lock" placeholder="请输入地址" v-model="registerData.address"></el-input>
                 </el-form-item>
                <!-- 注册按钮 绑定单击事件 是个函数需要声名-->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="register">
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <!--返回时清空数据-->
                    <el-link type="info" :underline="false" @click="isRegister = false;clearRegisterData()">
                        ← 返回
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item prop="idCard">
                    <el-input :prefix-icon="User" placeholder="请输入身份证号" v-model="registerData.idCard"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <el-form-item class="flex">
                    <div class="flex">
                        <el-checkbox>记住我</el-checkbox>
                        <el-link type="primary" :underline="false">忘记密码？</el-link>
                    </div>
                </el-form-item>
                <!-- 登录按钮 绑定单击事件 是个函数需要声名-->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterData()">
                        注册 →
                    </el-link>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: 
            url('@/assets/last.png') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>